<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>快速生成图标</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        .icons { display: flex; gap: 20px; margin: 20px 0; }
        .icon { text-align: center; }
        canvas { border: 1px solid #ccc; }
        button { margin: 10px; padding: 10px 20px; background: #007bff; color: white; border: none; cursor: pointer; }
        button:hover { background: #0056b3; }
    </style>
</head>
<body>
    <h1>🚀 快速生成Chrome扩展图标</h1>
    <p>点击下面的按钮，快速下载所需的图标文件</p>
    
    <div class="icons">
        <div class="icon">
            <h3>16x16</h3>
            <canvas id="icon16" width="16" height="16"></canvas>
            <br><button onclick="download('icon16', 'icon16.png')">下载</button>
        </div>
        <div class="icon">
            <h3>32x32</h3>
            <canvas id="icon32" width="32" height="32"></canvas>
            <br><button onclick="download('icon32', 'icon32.png')">下载</button>
        </div>
        <div class="icon">
            <h3>48x48</h3>
            <canvas id="icon48" width="48" height="48"></canvas>
            <br><button onclick="download('icon48', 'icon48.png')">下载</button>
        </div>
        <div class="icon">
            <h3>128x128</h3>
            <canvas id="icon128" width="128" height="128"></canvas>
            <br><button onclick="download('icon128', 'icon128.png')">下载</button>
        </div>
    </div>

    <button onclick="downloadAll()" style="background: #28a745; font-size: 16px; padding: 15px 30px;">📦 一键下载全部图标</button>

    <script>
        function drawIcon(canvas) {
            const ctx = canvas.getContext('2d');
            const size = canvas.width;
            
            // 清空画布
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(0, 0, size, size);
            
            // 设置颜色
            ctx.fillStyle = '#007bff';
            
            // 绘制简化的二维码图案
            const unit = size / 8;
            const pattern = [
                [1,1,1,0,0,1,1,1],
                [1,0,1,0,0,1,0,1],
                [1,1,1,0,0,1,1,1],
                [0,0,0,1,1,0,0,0],
                [0,1,0,1,1,0,1,0],
                [1,1,1,0,0,1,1,1],
                [1,0,1,0,0,1,0,1],
                [1,1,1,1,1,1,1,1]
            ];
            
            for(let y = 0; y < 8; y++) {
                for(let x = 0; x < 8; x++) {
                    if(pattern[y][x]) {
                        ctx.fillRect(x * unit, y * unit, unit, unit);
                    }
                }
            }
        }
        
        function download(canvasId, filename) {
            const canvas = document.getElementById(canvasId);
            const link = document.createElement('a');
            link.download = filename;
            link.href = canvas.toDataURL();
            link.click();
        }
        
        function downloadAll() {
            const files = [
                ['icon16', 'icon16.png'],
                ['icon32', 'icon32.png'],
                ['icon48', 'icon48.png'],
                ['icon128', 'icon128.png']
            ];
            
            files.forEach(([id, name], index) => {
                setTimeout(() => download(id, name), index * 200);
            });
        }
        
        // 初始化
        ['icon16', 'icon32', 'icon48', 'icon128'].forEach(id => {
            drawIcon(document.getElementById(id));
        });
    </script>
</body>
</html> 